<template>
  <div class="coupon-center">
    <BaseHeader></BaseHeader>
    <div class="content">
      <div>
        <div class="coupon-title">
          <router-link to="/">
            <img src="../assets/images/logo.png" width="120" alt="" />
          </router-link>
          <p>领券中心</p>
          <Input
            search
            style="width:400px"
            @on-search="search"
            enter-button="搜索"
            placeholder="搜索优惠券"
          />
        </div>

        <div class="fontsize_18 recommend">推荐好券</div>

        <empty v-if="list.length === 0" />
        <ul class="coupon-list" v-else>
          <li v-for="(item, index) in list" class="coupon-item" :key="index">
            <div class="c-left">
              <div>
                <span
                  v-if="item.couponType === 'PRICE'"
                  class="fontsize_12 global_color"
                  >￥<span class="price">{{
                    item.price | unitPrice
                  }}</span></span
                >
                <span
                  v-if="item.couponType === 'DISCOUNT'"
                  class="fontsize_12 global_color"
                  ><span class="price">{{ item.couponDiscount }}</span
                  >折</span
                >
                <span class="describe"
                  >满{{ item.consumeThreshold }}元可用</span
                >
              </div>
              <p>使用范围：{{ useScope(item.scopeType, item.storeName) }}</p>
              <p>有效期：{{ item.endTime }}</p>
            </div>
            <b></b>
            <a class="c-right" @click="receive(item)">立即领取</a>
            <i class="circle-top"></i>
            <i class="circle-bottom"></i>
          </li>
        </ul>
        <Page
          :total="total"
          @on-change="changePageNum"
          class="pageration"
          @on-page-size-change="changePageSize"
          :page-size="params.pageSize"
          show-total
          show-sizer
        >
        </Page>
      </div>
    </div>
    <BaseFooter></BaseFooter>
  </div>
</template>
<script>
import * as ApiCoupon from '@/api/MyApi/Coupon.js';
export default {
  data() {
    return {
      list: [], // 优惠券列表
      total: 0, // 优惠券总数
      params: {
        // 请求参数
        getType: 'FREE',
        pageNumber: 1,
        pageSize: 20,
      },
      userInfo: {},
    };
  },
  methods: {
    // 搜索优惠券
    search(item) {
      this.params.couponName = item;
      this.params.pageNumber = 1;
      this.getList();
    },
    // 获取优惠券列表
    getList() {
      this.$Spin.show();
      console.log('获取优惠券列表', this.params);
      ApiCoupon.getBuyerCouponPage(this.params).then((res) => {
        this.$Spin.hide();
        this.loading = false;
        if (res.data.code == 201) {
          this.list = res.data.obj.records;
          this.total = parseInt(res.data.obj.total);
        }
      });
      // couponList(this.params)
      //   .then((res) => {
      //     this.$Spin.hide();
      //     this.loading = false;
      //     if (res.success) {
      //       this.list = res.result.records;
      //       this.total = res.result.total;
      //     }
      //   })
      //   .catch(() => {
      //     this.$Spin.hide();
      //   });
    },
    // 分页 改变页码
    changePageNum(val) {
      this.params.pageNumber = val;
      this.getList();
    },
    // 分页 改变每页数
    changePageSize(val) {
      this.params.pageNumber = 1;
      this.params.pageSize = val;
      this.getList();
    },
    // 领取优惠券
    receive(item) {
      let param = {
        couponId: item.id,
        userId: this.userInfo.id,
      };
      console.log('领取优惠券:', param);
      ApiCoupon.userReceiveCoupon(param).then((res) => {
        if (res.data.code == 201) {
          this.$Modal.confirm({
            title: '领取优惠券',
            content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
            okText: '我的优惠券',
            cancelText: '立即使用',
            closable: true,
            onOk: () => {
              this.$router.push('/home/Coupons');
            },
            onCancel: () => {
              if (item.storeId !== '0') {
                this.$router.push({
                  path: '/merchant',
                  query: { id: item.storeId },
                });
              } else {
                if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
                  this.$router.push({
                    path: '/goodsList',
                    query: { categoryId: item.scopeId },
                  });
                } else {
                  this.$router.push({ path: '/goodsList' });
                }
              }
            },
          });
        } else {
          this.$Message.error(res.data.message);
        }
      });

      // receiveCoupon(item.id).then((res) => {
      //   if (res.success) {
      //     this.$Modal.confirm({
      //       title: '领取优惠券',
      //       content: '<p>优惠券领取成功，可到我的优惠券页面查看</p>',
      //       okText: '我的优惠券',
      //       cancelText: '立即使用',
      //       closable: true,
      //       onOk: () => {
      //         this.$router.push('/home/Coupons');
      //       },
      //       onCancel: () => {
      //         if (item.storeId !== '0') {
      //           this.$router.push({
      //             path: '/merchant',
      //             query: { id: item.storeId },
      //           });
      //         } else {
      //           if (item.scopeType === 'PORTION_GOODS_CATEGORY') {
      //             this.$router.push({
      //               path: '/goodsList',
      //               query: { categoryId: item.scopeId },
      //             });
      //           } else {
      //             this.$router.push({ path: '/goodsList' });
      //           }
      //         }
      //       },
      //     });
      //   }
      // });
    },
    // 优惠券可用范围
    useScope(type, storeName) {
      let shop = '平台';
      let goods = '全部商品';
      if (storeName !== 'platform') shop = storeName;
      switch (type) {
        case 'ALL':
          goods = '全部商品';
          break;
        case 'PORTION_GOODS':
          goods = '部分商品';
          break;
        case 'PORTION_GOODS_CATEGORY':
          goods = '部分分类商品';
          break;
      }
      return `${shop}${goods}可用`;
    },
  },
  mounted() {
    this.userInfo = JSON.parse(localStorage.getItem('userInfo'));
    this.getList();
  },
};
</script>
<style lang="scss" scoped>
@import '../assets/styles/coupon.scss';
.content {
  width: 100%;
  background-color: #fff;

  > div {
    margin: 10px auto;
    width: 1200px;
  }
}
.coupon-title {
  display: flex;
  align-items: center;

  p {
    font-size: 18px;
    margin-right: 500px;
  }
  border-bottom: 2px solid $theme_color;
}
.recommend {
  margin: 20px auto;
  font-weight: bold;
  width: 200px;
  text-align: center;
}
.coupon-item {
  b {
    background: url('../assets/images/small-circle.png') top left repeat-y;
  }
}
.pageration {
  text-align: right;
  padding-bottom: 10px;
}
</style>
